
<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <el-card style="width: 100%;height: 600px;">
            <h4>房型筛选</h4>
            <el-select v-model="RoomNo.roomTypeId" placeholder="全部房型" style="width: 100px;" @change="GetRoomNodatano">
              <el-option v-for="item in Roomtypedata" :label="item.roomName" :value="item.id" />
            </el-select>
            <h4>房态筛选</h4>
            <el-check-tag style="width: 70px; height: 20px;border-color: black;" :checked="checked1" type="primary"
              @change="onChange1">
              全部
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked2" type="primary"
              @change="onChange2">
              空房
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked3" type="primary"
              @change="onChange3">
              在住
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked4" type="primary"
              @change="onChange4">
              预定
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked5" type="primary"
              @change="onChange5">
              保留
            </el-check-tag>
            <h4>更多筛选</h4>
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked6" type="primary"
              @change="onChange6">
              不限
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked7" type="primary"
              @change="onChange7">
              净房
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked8" type="primary"
              @change="onChange8">
              脏房
            </el-check-tag>
            <br />
            <el-check-tag style="width: 70px; height: 20px;margin-top: 25px;" :checked="checked9" type="primary"
              @change="onChange9">
              维修
            </el-check-tag>
          </el-card>
        </el-aside>
        <el-main>
          <div v-for="item in getRoomNONO" :key="item.roomCode" class="room-item">
            <h2>{{ item.roomTypeName }}
              <el-card style="width: 200px;height: 100px;">
                <el-icon style="float: right;">
                  <MoreFilled />
                </el-icon>
                <table >
                  <tr>
                    <td>{{ item.roomCode }}</td>
                  </tr>
                </table>
              </el-card>
            </h2>
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
<script setup lang="ts">
import { ref, reactive, onMounted, unref } from 'vue';
import axios from 'axios';



//绑定下拉框
const RoomNo = reactive({
  roomTypeId: null,
})
const Roomtypedata = ref<any>([
  {
    roomName: '',
    id: null
  }
])

//显示方法
const GetRoomType = () => {
  axios.get("http://120.26.135.179:8033/api/RoomType").then(res => {
    Roomtypedata.value = res.data.data;
  })
}

const getRoomNONO = ref<any>([]);
const RoomNOdataNO = reactive({
  roomTypeId: '',
  roomNO: '',
  roomStatus: '',
  RoomName:''
})

const GetRoomNodatano = () => {
  axios.get("http://120.26.135.179:8033/api/RoomCodeInfo",{
    params:{
        RoomTypeId:RoomNo.roomTypeId
    }
  }).then(res => {
    getRoomNONO.value = res.data.data;
    console.log(getRoomNONO.value)
  })
}



onMounted(() => {
  GetRoomType();
  GetRoomNodatano();
})

///状态模块
//#region 
const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
const checked7 = ref(false)
const checked8 = ref(false)
const checked9 = ref(false)

const onChange1 = (status: boolean) => {
  checked1.value = status
  checked2.value = false;
  checked3.value = false;
  checked4.value = false;
  checked5.value = false;
}

const onChange2 = (status: boolean) => {
  checked2.value = status
  checked1.value = false;
  checked3.value = false;
  checked4.value = false;
  checked5.value = false;
}

const onChange3 = (status: boolean) => {
  checked3.value = status
  checked1.value = false;
  checked2.value = false;
  checked4.value = false;
  checked5.value = false;
}

const onChange4 = (status: boolean) => {
  checked4.value = status
  checked1.value = false;
  checked3.value = false;
  checked2.value = false;
  checked5.value = false;
}

const onChange5 = (status: boolean) => {
  checked6.value = status
  checked7.value = false;
  checked8.value = false;
  checked9.value = false;
}
const onChange6 = (status: boolean) => {
  checked6.value = status
  checked7.value = false;
  checked8.value = false;
  checked9.value = false;
}
const onChange7 = (status: boolean) => {
  checked7.value = status
  checked6.value = false;
  checked8.value = false;
  checked9.value = false;
}
const onChange8 = (status: boolean) => {
  checked8.value = status
  checked7.value = false;
  checked6.value = false;
  checked9.value = false;
}
const onChange9 = (status: boolean) => {
  checked9.value = status
  checked7.value = false;
  checked8.value = false;
  checked6.value = false;
}
//#endregion


</script>